import { BulbOutlined, CaretDownOutlined, CaretUpOutlined, DashboardOutlined, PlusOutlined, RightOutlined, UserOutlined } from '@ant-design/icons'
import { Progress, Image, Select, Space, Button } from 'antd'
import React from 'react'

export default function page() {
  return (
    <div>
      <div className='bigdiv' style={{
        display: 'flex',
        justifyContent: 'space-around'

      }}>
        <div className='ones'>
          <p className='tit'>月销售金额(元)</p>
          <p className='font'>120,000</p>
          <p>周同比<CaretUpOutlined style={{ color: 'orange' }} /> 12%日环比 <CaretDownOutlined style={{ color: 'green' }} /> 12%</p>
        </div>
        <div className='ones'>
          <p className='tit'>月回款金额(元)</p>
          <p className='font'>100000</p>
          <p><Image src="/u7961.png" ></Image></p>
        </div>
        <div className='ones'>
          <p className='tit'>本月成交订单</p>
          <p className='font'>1,000</p>
          <p>
            <Progress steps={1} percent={50} showInfo={false} />
            <Progress steps={1} percent={90} showInfo={false} />
          </p>
        </div>
        <div className='ones' style={{

        }}>
          <div >
            <p className='tit'>完成销售目标</p>
            <p className='font'>75%</p>
            <p></p>
          </div>
          <Progress strokeLinecap="butt" type="circle" percent={75} showInfo={false} size='small' style={{
            marginLeft: '120px'

          }} />
        </div>
        <div className='ones'>
          <p className='tit'>回款达成率</p>
          <p className='font'>80%</p>
          <p></p>
          <Progress strokeLinecap="butt" percent={80} showInfo={false} />
        </div>
      </div>
      <div className='twos'>
        <div className='top' style={{ marginLeft: '20px' }}>快速新建</div>
        <div className='parent'>
          <div className='child'>
            <div><Image src="/img/u6917.svg" style={{
              width: '54px',
              height: '54px'
            }}></Image></div>
            <div className='fonts'>新建客户</div>
          </div>
          <div className='child'>
            <div><Image src="/img/u6916.svg" style={{
              width: '54px',
              height: '54px'
            }}></Image></div>
            <div className='fonts'>新建线索</div>
          </div>
          <div className='child'>
            <div><Image src="/img/u6915.svg" style={{
              width: '54px',
              height: '54px'
            }}></Image></div>
            <div className='fonts'>新建商机</div>
          </div>
          <div className='child'>
            <div><Image src="/img/u6918.svg" style={{
              width: '54px',
              height: '54px'
            }}></Image></div>
            <div className='fonts'>新建订单</div>
          </div>
          <div className='child'>
            <div><Image src="/img/u6920.svg" style={{
              width: '54px',
              height: '54px'
            }}></Image></div>
            <div className='fonts'>新建联系人</div>
          </div>
          <div className='child'>
            <div><Image src="/img/u6919.svg" style={{
              width: '54px',
              height: '54px'
            }}></Image></div>
            <div className='fonts'>写新跟进</div>
          </div>
          <div className='child'>
            <div><Image src="/img/u6922.svg" style={{
              width: '54px',
              height: '54px'
            }}></Image></div>
            <div className='fonts'>新建任务</div>
          </div>
          <div className='child'>
            <div><Image src="/img/u6921.svg" style={{
              width: '54px',
              height: '54px'
            }}></Image></div>
            <div className='fonts'>新建工单</div>
          </div>
          <div className='child'>
            <div><Image src="/img/u6924.svg" style={{
              width: '54px',
              height: '54px'
            }}></Image></div>
            <div className='fonts'>新建回款单</div>
          </div>
          <div className='child'>
            <div><Image src="/img/u6923.svg" style={{
              width: '54px',
              height: '54px'
            }}></Image></div>
            <div className='fonts'>回款计划</div>
          </div>
        </div>
      </div>
      <div className='there'>
        <div className='theres'>
          <div className='bigs'>
            <div className='bottop'>数据简报</div>
            <div className='botcon'>
              <Space>
                <Select
                  defaultValue="公司简报"
                  style={{ width: 160, height: 30 }}
                  options={[
                    { value: 'jack', label: 'Jack' },
                    { value: 'lucy', label: 'Lucy' },
                    { value: 'Yiminghe', label: 'yiminghe' },
                    { value: 'disabled', label: 'Disabled', disabled: true },
                  ]}
                />
                <Select
                  defaultValue="本周"
                  style={{ width: 160, height: 30 }}
                  options={[
                    { value: 'jack', label: 'Jack' },
                    { value: 'lucy', label: 'Lucy' },
                    { value: 'Yiminghe', label: 'yiminghe' },
                    { value: 'disabled', label: 'Disabled', disabled: true },
                  ]}
                />
              </Space>
            </div>
          </div>
          <div className='bdiv'>
            <div>
              <p>新增客户</p>
              <p style={{ fontSize: '28px' }}>200</p>
            </div>
            <div>
              <p>新增线索</p>
              <p style={{ fontSize: '28px' }}>200</p>
            </div>
            <div>
              <p>新增商机</p>
              <p style={{ fontSize: '28px' }}>200</p>
            </div>
            <div>
              <p>新增订单</p>
              <p style={{ fontSize: '28px' }}>200</p>
            </div>
            <div>
              <p>新增联系人</p>
              <p style={{ fontSize: '28px' }}>200</p>
            </div>
            <div>
              <p>跟进次数</p>
              <p style={{ fontSize: '28px' }}>200</p>
            </div>
            <div>
              <p>处理任务</p>
              <p style={{ fontSize: '28px' }}>200</p>
            </div>
            <div>
              <p>处理工单</p>
              <p style={{ fontSize: '28px' }}>200</p>
            </div>

          </div>
        </div>
        <div className='theres'>
          <div className='bigs'>
            <div className='bottop'>系统公告</div>
            <div className='botcon'>
              <Space>
                <Button><PlusOutlined />发布公告</Button>
                <Button>查看更多<RightOutlined /></Button>
              </Space>
            </div>
          </div>
          <div className='bdivs'>
            <div className='zi'>
              <div>【内部分享】如何建立良好的客户关系</div>
              <div><DashboardOutlined />2019-04-10 09:00</div>
            </div>
            <div className='zi'>
              <div>【内部分享】如何建立良好的客户关系</div>
              <div><DashboardOutlined />2019-04-10 09:00</div>
            </div>
            <div className='zi'>
              <div>【内部分享】如何建立良好的客户关系</div>
              <div><DashboardOutlined />2019-04-10 09:00</div>
            </div>
            <div className='zi'>
              <div>【内部分享】如何建立良好的客户关系</div>
              <div><DashboardOutlined />2019-04-10 09:00</div>
            </div>
            <div className='zi'>
              <div>【内部分享】如何建立良好的客户关系</div>
              <div><DashboardOutlined />2019-04-10 09:00</div>
            </div>
            <div className='zi'>
              <div>【内部分享】如何建立良好的客户关系</div>
              <div><DashboardOutlined />2019-04-10 09:00</div>
            </div>
            <div className='zi'>
              <div>【内部分享】如何建立良好的客户关系</div>
              <div><DashboardOutlined />2019-04-10 09:00</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
